/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 * This Source Code Form is "Incompatible With Secondary Licenses", as
 * defined by the Mozilla Public License, v. 2.0.
 */

.read-page-scroll .read-text-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  --slide-x: 0px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: var(--window-height);
  overflow: hidden;
  overflow-wrap: break-word;
  contain: layout;
  --text-max-width: 800px;
}

.read-page-scroll .read-body-scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden scroll;
  overflow-wrap: break-word;
  z-index: 2;
  scrollbar-width: none;
  will-change: scroll-position;
  -webkit-mask: linear-gradient(to bottom,
    transparent 0px,
    transparent var(--page-margin-y),
    black var(--page-margin-y),
    black calc(100% - calc(var(--page-margin-y) + 20px)),
    transparent calc(100% - calc(var(--page-margin-y) + 20px)),
    transparent 100%
  );
  mask: linear-gradient(to bottom,
    transparent 0px,
    transparent var(--page-margin-y),
    black var(--page-margin-y),
    black calc(100% - calc(var(--page-margin-y) + 20px)),
    transparent calc(100% - calc(var(--page-margin-y) + 20px)),
    transparent 100%
  );
}
/* Chrome doesn't support scrollbar-width yet */
.read-page-scroll .read-body-scroll::-webkit-scrollbar {
  display: none;
}

.read-page-scroll .read-text-hidden .read-body-scroll {
  overflow: hidden;
}

.read-page-scroll .read-body-scroll.read-body-scroll-slide-x {
  overflow: hidden;
}

.read-page-scroll .read-body {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: var(--page-margin-y) var(--page-margin-x) calc(var(--page-margin-y) + 20px);
  padding: var(--page-margin-y) max(var(--page-margin-x), calc(calc(100% - var(--text-max-width)) / 2)) calc(var(--page-margin-y) + 20px);
  line-height: 1.3;
  white-space: pre-wrap;
  text-align: justify;
  text-justify: auto;
  -webkit-user-select: auto;
  user-select: auto;
  overflow-wrap: break-word;
}

.read-page-scroll .read-body-scroll-to {
  overflow: hidden;
}

.read-page-scroll .read-body-scroll-to .read-body {
  transition: top ease-out 0.3333s;
}
.read-page-scroll .read-body-scroll-fast .read-body {
  transition-duration: 0.1667s;
}

.read-page-scroll .read-body p:empty::before {
  content: " ";
}

.read-page-scroll .read-body p.text-heading {
  font-size: 120%;
  font-weight: bold;
}

.read-page-scroll .trunk {
  display: flow-root;
  contain: content;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
.read-page-scroll .trunk-first {
  padding-top: 50px;
  padding-top: max(calc(50px - var(--page-margin-y)), 0px);
}
.read-page-scroll .trunk-last {
  padding-bottom: 60px;
  padding-bottom: max(calc(60px - var(--page-margin-y)), 0px);
}

.read-page-scroll p.text-trucked-start {
  margin-top: 0;
}
.read-page-scroll p.text-trucked-end {
  margin-bottom: 0;
}

.read-page-scroll .read-meta {
  position: absolute;
  bottom: var(--page-margin-y);
  left: var(--page-margin-x);
  left: max(var(--page-margin-x), calc(calc(100% - var(--text-max-width)) / 2));
  right: var(--page-margin-x);
  right: max(var(--page-margin-x), calc(calc(100% - var(--text-max-width)) / 2));
  margin: 0 auto;
  height: 12px;
  display: flex;
  color: #808080;
  font-size: 12px;
  line-height: 12px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

.read-page-scroll .read-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.read-page-scroll .read-progress {
  flex: 0 0 auto;
  white-space: nowrap;
}

.read-page-scroll .read-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: visible;
  z-index: 0;
  contain: strict;
}

.read-page-scroll .read-highlight span {
  position: absolute;
}

.read-page-scroll .read-text-page-buttons {
  z-index: -1;
  position: absolute;
}

.read-page-scroll .read-control .read-control-cover {
  width: 0;
  right: auto;
}
.read-page-scroll .read-control.read-control-active .read-control-cover {
  width: 100vw;
  transition: width step-end 0.4s;
}
.read-page-scroll .read-control.read-control-active-init .read-control-cover {
  width: 0;
}

.read-page-scroll .read-index {
  left: min(calc(var(--slide-offset) - var(--index-width)), 0px);
  right: calc(var(--index-width) - var(--slide-offset));
}

.read-page-scroll .read-index.read-sub-page-current {
  left: 0;
  right: 0;
}

.read-page-scroll .read-index:not(.read-index-slide) {
  transition: left ease-out 0.1s, right ease-out 0.1s;
}

.read-page-scroll .read-page-auto-scroll .read-body-scroll {
  overflow: hidden;
}
.read-page-scroll .read-text-auto-scroll-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
}
.read-page-scroll .read-page-auto-scroll .read-text-auto-scroll-cover {
  display: block;
}

